<template>
  <view>
    <view
      class="info-item"
      :class="{ 'no-border': index === animalInfo.length - 1 }"
      v-for="(item, index) in animalInfo"
      :key="index"
    >
      <text class="info-label">{{ item.title }}</text>
      <view class="box">
        <text class="info-value">{{ item.type }}</text>
        <uv-icon v-if="item.icon" :name="item.icon" size="24" color="#eaeaea"></uv-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';

// 定义 props，接收父组件传递的数据
defineProps({
  animalInfo: {
    type: Array,
    required: true
  }
});
</script>

<style scoped>
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

.info-item:not(.no-border) {
  border-bottom: 2rpx solid #f1f1f1;
}

.info-label {
  font-size: 32rpx;
  color: #343434;
}

.info-value {
  font-size: 32rpx;
  color: #999999;
}

.box {
  display: flex;
  align-items: center;
}
</style>